<template>
  <div id="staff-project">
    <!-- 面包屑 -->
    <span class="staff-hui">员工管理 / </span>
    <span>岗位管理</span>

    <div id="staff-box">
      <!-- 内容 -->
      <div id="staff-content">
        <!-- 查询 -->
        <div id="staff-query">
          <label for="staff-in1"> 岗位名称： </label>
          <el-input
            placeholder="请输入岗位名称"
            v-model="input"
            clearable
          ></el-input>
          <!-- select -->
          所属部门：
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <!-- select-2 -->
          状态：
          <el-select v-model="value2" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <!-- 按钮 -->
          <div>
            <el-button size="small" type="info" @click="postChongZhi"
              >重置</el-button
            >
            <el-button
              size="small"
              type="primary"
              id="getchaXun"
              @click="postChaXun"
              >查询</el-button
            >

            <!-- 新增 -->
            <el-button size="small" type="primary" @click="post_XinZeng"
              >新增</el-button
            >
          </div>
        </div>
      </div>
      <!-- 新增的内容 -->
      <el-dialog
        title="添加岗位"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <!-- 表单 -->
        <div style="margin: 20px"></div>
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <!-- 岗位名称 -->
          <el-form-item label="岗位名称">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <!-- 所属部门 -->
          <div class="forSelect">
            <span>所属部门</span>
            <el-select
              v-model="formLabelAlign.department"
              placeholder="请选择部门"
            >
              <el-option label="人事部" value="1"></el-option>
              <el-option label="行政部" value="2"></el-option>
              <el-option label="财务部" value="3"></el-option>
              <el-option label="销售部" value="4"></el-option>
              <el-option label="市场部" value="5"></el-option>
            </el-select>
          </div>

          <!-- 操作人 -->
          <el-form-item label="操作人">
            <el-input v-model="formLabelAlign.operator" disabled></el-input>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item label="状态">
            <el-radio-group v-model="formLabelAlign.state">
              <el-radio label="启用"></el-radio>
              <el-radio label="禁用"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button size="small" type="primary" @click="dialogXinZeng()"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 表格 -->
      <div id="staff-table">
        <el-table :data="postYama" style="width: 100%">
          <!-- id -->
          <el-table-column
            prop="post_id"
            label="排序号"
            width="100"
            align="center"
          >
          </el-table-column>
          <!-- 岗位名称 -->
          <el-table-column prop="post_name" label="岗位名称" width="180">
          </el-table-column>
          <!-- 所属部门 -->
          <el-table-column prop="department_name" label="所属部门">
          </el-table-column>
          <!-- 状态 -->
          <el-table-column prop="post_state" label="状态"> </el-table-column>
          <!-- 操作人 -->
          <el-table-column prop="post_operator" label="操作人">
          </el-table-column>
          <!-- 操作时间 -->
          <el-table-column prop="post_time" label="操作时间"> </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="warning"
                @click="postBianJi(scope.$index, scope.row)"
                >编辑</el-button
              >

              <!-- 删除 -->
              <el-button
                size="small"
                type="danger"
                @click="open(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 编辑内容 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogBianJi"
        width="40%"
        :before-close="handleBianJi"
      >
        <!-- 内容 -->

        <!-- 表单 -->
        <div style="margin: 20px"></div>
        <el-form
          :label-position="labelBianji"
          label-width="80px"
          :model="formLabelBianJi"
        >
          <!-- 排序号 -->
          <el-form-item label="排序号">
            <el-input v-model="formLabelBianJi.post_id" disabled></el-input>
          </el-form-item>
          <!-- 岗位名称 -->
          <el-form-item label="岗位名称">
            <el-input v-model="formLabelBianJi.post_name"></el-input>
          </el-form-item>
          <!-- 所属部门 -->
          <div class="forSelect">
            <span>所属部门</span>
            <el-select
              v-model="formLabelBianJi.department_name"
              placeholder="请选择部门"
            >
              <el-option label="人事部" value="人事部"></el-option>
              <el-option label="行政部" value="行政部"></el-option>
              <el-option label="财务部" value="财务部"></el-option>
              <el-option label="销售部" value="销售部"></el-option>
              <el-option label="市场部" value="市场部"></el-option>
            </el-select>
          </div>

          <!-- 操作人 -->
          <el-form-item label="操作人">
            <el-input
              v-model="formLabelBianJi.post_operator"
              disabled
            ></el-input>
          </el-form-item>
          <!-- 状态 -->
          <el-form-item label="状态">
            <el-radio-group v-model="formLabelBianJi.post_state">
              <el-radio label="启用"></el-radio>
              <el-radio label="禁用"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>

        <!-- 确认取消 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogBianJi = false">取 消</el-button>
          <el-button type="primary" @click="BianJiAjax">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <div id="staff-page">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalData"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelValue: "",
      // 页码
      page: 1,
      count: 5,
      // 总页数
      totalPag: 0,
      // 总共数据
      totalData: 0,
      // select
      options: [
        {
          value: "人事部",
          label: "人事部",
        },
        {
          value: "行政部",
          label: "行政部",
        },
        {
          value: "财务部",
          label: "财务部",
        },
        {
          value: "销售部",
          label: "销售部",
        },
        {
          value: "市场部",
          label: "市场部",
        },
      ],
      value: "",
      //   select2
      options2: [
        {
          value: "启用",
          label: "启用",
        },
        {
          value: "禁用",
          label: "禁用",
        },
      ],
      value2: "",
      //   搜input
      input: "",
      //   获取表格数据
      tableData: [
        {
          post_id: "" /* 排序号 */,
          post_name: "" /* 岗位 */,
          department_name: "" /* 部门 */,
          post_state: "" /* 状态 */,
          post_operator: "" /* 操作人 */,
          post_time: "" /* 操作时间 */,
          post_department: "" /* 部门号 */,
        },
      ],
      // 搜索用
      tableData2: [
        {
          post_id: "" /* 排序号 */,
          post_name: "" /* 岗位 */,
          department_name: "" /* 部门 */,
          post_state: "" /* 状态 */,
          post_operator: "" /* 操作人 */,
          post_time: "" /* 操作时间 */,
          post_department: "" /* 部门号 */,
        },
      ],
      currentPage1: 1,
      //   新增表单
      dialogVisible: false,
      //   表单表单
      labelPosition: "right",
      formLabelAlign: {
        job: "" /* 排序号 */,
        name: "" /* 岗位 */,
        department: "" /* 部门 */,
        state: "启用" /* 状态 */,
        operator: "系统管理员" /* 操作人 */,
      },

      // 编辑表单
      dialogBianJi: false,
      labelBianji: "right",
      formLabelBianJi: {
        post_id: "" /*排序号  */,
        post_name: "" /* 岗位名称 */,
        department_name: "" /* 部门 */,
        post_operator: "" /* 操作人 */,
        post_state: "" /* 状态 */,
      },
    };
  },
  methods: {
    // 新增
    dialogXinZeng() {
      let time = new Date();
      let time2 = time.toLocaleDateString();
      let time3 = time2.split("/").join("-");
      let suiji;
      // 领导 ID
      if (this.formLabelAlign.name == "董事长") {
        suiji = 0;
      }

      if (
        this.formLabelAlign.department == 1 &&
        this.formLabelAlign.name != "人事主管" &&
        this.formLabelAlign.name != "董事长"
      ) {
        suiji = 2;
      } else if (this.formLabelAlign.name == "人事主管") {
        suiji = 16;
      }

      if (
        this.formLabelAlign.department == 2 &&
        this.formLabelAlign.name != "行政主管" &&
        this.formLabelAlign.name != "董事长"
      ) {
        suiji = 5;
      } else if (this.formLabelAlign.name == "行政主管") {
        suiji = 16;
      }

      if (
        this.formLabelAlign.department == 3 &&
        this.formLabelAlign.name != "财务主管" &&
        this.formLabelAlign.name != "董事长"
      ) {
        suiji = 7;
      } else if (this.formLabelAlign.name == "财务主管") {
        suiji = 16;
      }

      if (
        this.formLabelAlign.department == 4 &&
        this.formLabelAlign.name != "销售主管" &&
        this.formLabelAlign.name != "董事长"
      ) {
        suiji = 11;
      } else if (this.formLabelAlign.name == "销售主管") {
        suiji = 16;
      }

      if (
        this.formLabelAlign.department == 5 &&
        this.formLabelAlign.name != "市场主管" &&
        this.formLabelAlign.name != "董事长"
      ) {
        suiji = 15;
      } else if (this.formLabelAlign.name == "市场主管") {
        suiji = 16;
      }

      this.dialogVisible = false;
      this.$axios({
        method: "post",
        url: "/staffAdmin/getAdd",
        data: {
          name: this.formLabelAlign.name,
          department: this.formLabelAlign.department,
          state: this.formLabelAlign.state,
          time: time3,
          suiji: suiji,
        },
      }).then((res) => {
        this.postGet();
      });
    },
    // 查询
    postChaXun() {
      this.page = 1;
      this.$axios({
        url: "/staffAdmin/getChaXun",
        params: {
          name: this.input,
          department_name: this.value,
          state: this.value2,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          this.totalData = res.data.data.length;
          this.tableData = res.data.data;
        }
      });
    },
    // 重置
    postChongZhi() {
      this.value = "";
      this.value2 = "";
      this.input = "";
      this.page = 1;
      this.postGet();
    },
    //   分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.count = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
    },
    // 删除
    open(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        // 删除 ajax
        .then(() => {
          this.$axios({
            method: "post",
            url: "/staffAdmin/postdel",
            data: {
              id: row.post_id,
            },
          }).then((res) => {
            if (res.data.code == 200) {
              if (row.name == null) {
                this.tableData = this.tableData.filter((v) => {
                  if (v.post_id != row.post_id) {
                    return v;
                  }
                });
                this.totalData = this.tableData.length;
                this.totalPag = Math.ceil(this.tableData.length / this.count);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            } else {
              this.$alert("岗位有人不予删除");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增
    post_XinZeng() {
      this.dialogVisible = true;
      this.formLabelAlign.name = "";
      this.formLabelAlign.department = "";
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 编辑
    postBianJi(index, val) {
      this.dialogBianJi = true;
      this.formLabelBianJi.post_id = val.post_id;
      this.formLabelBianJi.post_name = val.post_name;
      this.formLabelBianJi.department_name = val.department_name;
      this.formLabelBianJi.post_operator = val.post_operator;
      this.formLabelBianJi.post_state = val.post_state;
    },
    handleBianJi(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 编辑 Ajax
    BianJiAjax() {
      // 领导 ID
      let suiji;
      if (this.formLabelBianJi.post_name == "董事长") {
        suiji = 0;
      }

      if (
        this.formLabelBianJi.department_name == "人事部" &&
        this.formLabelBianJi.post_name != "人事主管" &&
        this.formLabelBianJi.post_name != "董事长"
      ) {
        suiji = 2;
      } else if (this.formLabelAlign.name == "人事主管") {
        suiji = 16;
      }

      if (
        this.formLabelBianJi.department_name == "行政部" &&
        this.formLabelBianJi.post_name != "行政主管" &&
        this.formLabelBianJi.post_name != "董事长"
      ) {
        suiji = 5;
      } else if (this.formLabelAlign.name == "行政主管") {
        suiji = 16;
      }

      if (
        this.formLabelBianJi.department_name == "财务部" &&
        this.formLabelBianJi.post_name != "财务主管" &&
        this.formLabelBianJi.post_name != "董事长"
      ) {
        suiji = 7;
      } else if (this.formLabelAlign.name == "财务主管") {
        suiji = 16;
      }

      if (
        this.formLabelBianJi.department_name == "销售部" &&
        this.formLabelBianJi.post_name != "销售主管" &&
        this.formLabelBianJi.post_name != "董事长"
      ) {
        suiji = 11;
      } else if (this.formLabelAlign.name == "销售主管") {
        suiji = 16;
      }

      if (
        this.formLabelBianJi.department_name == "市场部" &&
        this.formLabelBianJi.post_name != "市场主管" &&
        this.formLabelBianJi.post_name != "董事长"
      ) {
        suiji = 15;
      } else if (this.formLabelAlign.name == "市场主管") {
        suiji = 16;
      }
      let time = new Date();
      let time2 = time.toLocaleDateString();
      let time3 = time2.split("/").join("-");
      this.$axios({
        method: "post",
        url: "staffAdmin/getBianJi",
        data: {
          id: this.formLabelBianJi.post_id,
          name: this.formLabelBianJi.post_name,
          state: this.formLabelBianJi.post_state,
          buMenId: this.formLabelBianJi.department_name,
          time: time3,
          suiji: suiji,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.postGet();
        }
      });
      this.dialogBianJi = false;
    },
    // ajax函数渲染页面
    async postGet() {
      const { data: res } = await this.$axios({
        url: "/staffAdmin/getpost",
      });
      this.tableData = res.data;
      this.totalData = res.data.length;
      this.totalPag = Math.ceil(this.tableData.length / this.count);
    },
  },
  mounted() {
    // 执行ajax
    this.postGet();
  },
  computed: {
    postYama() {
      return this.tableData.slice(
        (this.page - 1) * this.count,
        this.page * this.count
      );
    },
  },
  watch: {
    // 分页最后数据删除自动取前一页
    totalPag(val, old) {
      if (this.page > val) {
        this.page = val;
      }
    },
  },
};
</script>

<style lang="less" scoped>
#staff-project {
  background: rgb(242, 242, 242);
  height: 100%;
  padding: 1.5% 2%;
}

// th 颜色
/deep/.el-table thead {
  color: #666;
  font-size: 16px;
}

// 内容容器
#staff-box {
  background: #fff;
  box-sizing: border-box;
  margin: 1.5% 0 0 0;
  padding: 1.6% 2%;
}

// 查询容器
#staff-content {
  border-bottom: 1px solid rgb(231, 231, 231);
  box-sizing: border-box;
  padding: 0 0 2% 0;
}
// 查询
#staff-query .el-input {
  width: 15%;
}
#staff-query .el-select {
  width: 10%;
}

// 表格容器
#staff-table {
  margin: 2% 0 0 0;
  box-sizing: border-box;
}

#staff-query {
  display: flex;
  align-items: center;
}

#staff-query .el-input,
#staff-query .el-select {
  margin: 0 2% 0 0;
}

.staff-hui {
  color: #666;
}

// 分页
#staff-page {
  margin: 1.5% 0 0 0;
  text-align: right;
  overflow: hidden;
}

// 共多少数据
/deep/.el-pagination__total,
/deep/ .el-pagination__sizes {
  text-align: center;
  float: left;
  color: #999;
}

/deep/.el-input__inner {
  color: #666;
}

// 编辑的 select 样式
.forSelect {
  display: flex;
  align-items: center;
  margin: 0 0 24px 0;
  box-sizing: border-box;
  padding: 0 0 0 11px;
}
.forSelect span {
  margin: 0 12px 0 0;
}
.forSelect .el-select {
  width: 86.8%;
}
</style>